<template>
    <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" active-text-color="red">
        <el-menu-item style="width: var(--asideW);" :index="null">
            <img style="width: 100px" src="/6pixian.ico" alt="Element logo" />
        </el-menu-item>
        <el-menu-item :index="null">
            <template v-for="im in menuList">
                <el-button :type="im.type" @click="im.fn" :text="im.text" :bg="im.bg">
                    <el-icon>
                        <component :is="im.icon" />
                    </el-icon>
                    {{ im.title }}
                </el-button>
            </template>
        </el-menu-item>
        <div style="flex: 1;"></div>
        <el-sub-menu :index="null" class="avatarsub">
            <template #title>
                <div class="avatar">
                    <el-avatar :size="35" :src="circleUrl" fit="fill" />
                    <span>{{ name }}</span>
                </div>
            </template>
            <el-menu-item @click="loginOut">登出</el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup>
import { post, get } from '@/request/axiosset'
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue'
import circleUrl from '/niao.jpeg'
import { useStore } from '@/stores'



const store = useStore()
const loginOut = e => {
    ElMessageBox.confirm('是否退出系统？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        get('/user/logout').then(res => {
            // console.log('🧤', res)
            if (res?.data.code == 200) router.push('/login'), ElMessage.success('退出成功')
        })
    })
}

const menuList = [
    {
        title: '新建',
        type: 'primary',
        icon: 'Plus',
        fn: () => {
            console.log('1')
            post('/model-info/add', {
                "modelData": {},
                "name": "untitled"
            }).then(res => {
                console.log(store);
                router.push({
                    name: 'edit',
                    params: {
                        children: "untitled"
                    },
                    query: {
                        id: res.data.data
                    }
                })
            })
        }
    },
    // {
    //     title: '导入',
    //     text: true,
    //     bg: true,
    //     icon: 'DocumentCopy',
    //     fn: () => {
    //         console.log('2')
    //     }
    // },
    // {
    //     title: '文档同步',
    //     text: true,
    //     icon: 'Refresh',
    //     fn: () => {
    //         console.log('3')
    //     }
    // }
]
const name = ref('用户')
onMounted(() => {
    get('/user/info').then(res => {
        name.value = res.data.data.username

        get('/model-info/list').then(res => {
            store.asideMenu = res.data.data
        })
    })
})
</script>

<style scoped>
.el-menu {
    height: 100%;
    --el-menu-hover-bg-color: transparent;

    .el-button {
        padding: 18px 15px;
    }
}

.avatarsub {
    &>>>.el-sub-menu__title {
        padding: 0;
    }

    &>>>i {
        display: none;
    }

    .avatar {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 5px;
        width: 85px;
        height: calc(var(--headerH) - 10px);
        overflow: hidden;

        span+span {
            height: 20px;
            transform: translateY(-10px);
        }
    }
}
</style>